<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="./css/index.css" />
		<link rel="stylesheet" type="text/css" href="./css/screen.css" />
		<link rel="stylesheet" type="text/css" href="./css/input.css" />
		<link rel="stylesheet" type="text/css" href="./css/tip.css" />
		<link rel="stylesheet" type="text/css" href="./css/square.css" />
		<link rel="stylesheet" type="text/css" href="./css/result.css" />
		<script src="./js/jquery-3.4.1.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="./js/socket.io.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<!-- socketio -->
		<script type="text/javascript" charset="utf-8">
			// var socket = io('ws://localhost:5002');
			//       socket.on('connect', function() {
			//       socket.emit('SetMode', 2);
			// 	socket.on('reply',function(reply){
			// 	if (reply === "succes"){

			// 		socket.emit('GetDistance',1)
			// 		socket.on('AcceptDistance' ,function(distance){
			// 			console.log(distance)
			// 		})
			// 			}
			// 		})
			//       });
		</script>
		<div class="wrap">
			<ul class="left">
				<li><a href="#" class="click about">说明</a></li>
				<li><a href="#" class="screen">屏幕校准</a></li>
				<li><a href="#" class="input">输入方式</a></li>
				<li><a href="#" class="meauser">测量对象</a></li>
				<li><a href="#" class="distance">距离测量</a></li>
				<li><a href="#" class="start">开始</a></li>
			</ul>
			<div class="right">
				<div class="aboutTip right-common">说明</div>
				<div class="screen-right right-common" style="display: none;">
					<h1>调节银行卡大小</h1>
					<button class="back">-</button>
					<input type="range" name="range" id="range" value="50" min="0" max="100" oninput="b()" step="1" />
					<button class="fast">+</button>
					<div class="card">

					</div>
					<span class="scr-tip">
						为了获取您的设备的PPI，以便更准确地进行视力表显示。请
						将您手中的银行卡大小与屏幕中银行卡大小进行比较，调节至相同。
					</span>
				</div>
				<div class="input-right right-common" style="display: none;">
					<ul>
						<li class="hand click">手势识别</li>
						<li class="keyboard">键盘识别</li>
					</ul>
					<span class="hand_tip">通过摄像头识别手指向的方向</span>
					<span class="keyboard_tip" style="display: none;">通过键盘方向键输入方向</span>
					<span class="word_tip">请输入您看到<strong>“E”</strong>的方向</span>
				</div>
				<div class="meauser-right right-common" style="display: none;">
					<ul>
						<li class="left_eye click">左眼</li>
						<li class="right_eye click">右眼</li>
					</ul>
					<span class="word_tip">请选择测试对象(可多选)</span>
				</div>
				<div class="distance-right right-common" style="display: none;">
					<ul>
						<li class="hand_1 click">手动测量</li>
						<li class="camera">摄像头识别</li>
					</ul>
					<span class="camera_tip" style="display: none;">通过摄像头识别手指向的方向</span>
					<span class="hand_1_tip">通过键盘方向键输入方向</span>
					<input type="text" class="number" value="5" />
					<span class="word_tip dis">请输入双眼离屏幕的距离(推荐距离5m)</span>
				</div>
				<div class="start-right right-common" style="display: none;">
					<button type="button" class="startBtn">开始</button>
				</div>
			</div>
		</div>
		<div class="result" style="display: none;">
			<span class="title">测试结果</span>
			<span class="left-eye-result">左眼</span>
			<span class="right-eye-result">右眼</span>
			<div class="float">
				<span class="title">小数</span>
				<span class="left-eye-result">1.0</span>
				<span class="right-eye-result">1.0</span>
			</div>
			<div class="five">
				<span class="title">五分</span>
				<span class="left-eye-result">5.0</span>
				<span class="right-eye-result">5.0</span>
			</div>
			<button type="button" class="lastsure">确定</button>
		</div>
		<div class="another">
			<div class="tip" style="display: none;">
				<span class="start-tip">注意：请保持屏幕亮度足够</span>
				<button class="sure">确定</button>
			</div>
			<div class="check_tip" style="display: none;"></div>
			<div id="progress" style="display: none;">
				<div id="curr-progress">
				</div>
			</div>
			<img src="http://127.0.0.1:5002/video_feed" id="camera_img"
				style="width: 640px;height: 480px;display: none;" />
			<button class="next" style="display: none;">下一步</button>
			<div class="square" style="display: none;">
				<span class="eye-type">左眼</span>
				<div class="E-ui">
					<svg width="100px" height="100px" viewBox="0 0 5 5" xmlns="http://www.w3.org/2000/svg">
						<path d="M 0 0 L 5 0 L 5 1 L 1 1 L 1 2 L 5 2 L 5 3 L 1 3 L 1 4 L 5 4 L 5 5 L 0 5 z" fill="black"
							stroke="black" stroke-width="0" />
					</svg>
				</div>
				<span class="now-V">0.1</span>
				<span class="close"></span>
			</div>
		</div>
		<script src="./js/screen.js" type="text/javascript" charset="utf-8"></script>
		<!--输入方式-->
		<script type="text/javascript">
			let right_li = $('.input-right > ul >li')
			right_li.eq(0).addClass('click')
			right_li.click(function() {
				let index = $(this).index()
				right_li.removeClass('click')
				right_li.eq(index).addClass('click')
				if (index == 0) {
					$('.hand_tip').show()
					$('.keyboard_tip').hide()
				} else {
					$('.hand_tip').hide()
					$('.keyboard_tip').show()
				}

			})
		</script>
		<!--测量对象-->
		<script type="text/javascript">
			let meauser = $('.meauser-right > ul >li')
			meauser.click(function() {
				let index = $(this).index()
				if ($(this).attr('class').indexOf('click') != -1) {
					$(this).removeClass('click')
				} else {
					$(this).addClass('click')
				}
			})
		</script>
		<!--距离测量-->
		<script type="text/javascript">
			let distance = $('.distance-right > ul >li')
			distance.click(function() {
				let index = $(this).index()
				distance.removeClass('click')
				distance.eq(index).addClass('click')
				if (index == 0) {
					$('.hand_1_tip').show()
					$('.camera_tip').hide()
				} else {
					$('.hand_1_tip').hide()
					$('.camera_tip').show()
				}
			})
		</script>
		<!--开始按钮-->
		<script type="text/javascript">
			let startBtn = $('.startBtn');
			var data = []
			var eyes = []
			startBtn.click(function() {
				$('.wrap').hide()
				$('body').css('background-color', '#fff')
				$('.another').show()
				$('.tip').show()
				$('#progress').hide()
				for (var i = 0; i < $('.click').length; i++) {
					data[i] = $('.click').eq(i).text()
				}
				for (let i = 0; i < $('.meauser-right > ul > .click').length; i++) {
					eyes[i] = $('.meauser-right > ul > .click').eq(i).text()
				}
				console.log(data)
			})

			function video_feed(direction, num1) {
				let arr_fangxiang = ['left', 'right', 'up', 'down']
				let fangxiang = arr_fangxiang[num1]
				if(fangxiang === 'left'){
					$('.check_tip').text('请将您的食指指向左方')
				}else if(fangxiang === 'right' ){
					$('.check_tip').text('请将您的食指指向右方')
				}else if(fangxiang === 'up' ){
					$('.check_tip').text('请将您的食指指向上方')
				}else if(fangxiang === 'down' ){
					$('.check_tip').text('请将您的食指指向下方')
				}
				$('#curr-progress').css('animation', '')
				if (direction === fangxiang) {
					$('#curr-progress').css('animation', 'progress .5s linear forwards')
				}
			}
			// 正式开始按钮
			let sure = $('.sure')
			status = true
			sure.click(function() {
				var d = $('.number').val()
				$('.tip').hide()
				// $('.next').show()
				if(status === 'true'){
					$('#progress').hide()
					$('.next').show()
				}else{
					a()
				}
				if (data[1] == '手势识别' && data[data.length-1] === '摄像头识别') {
					$('.check_tip').show()
					$('.next').hide()
					$('#camera_img').show()
					$('#progress').show()
					let statu = true
					let num1 = 0
					let dis = io('ws://localhost:5002')
					let socket = io('ws://localhost:5002')
					dis.emit('SetMode',2)
					dis.on('reply',function(reply){
						if (reply === "succes"){
								dis.emit('GetDistance',1)
								dis.on('AcceptDistance' ,function(distance){
									let dis_now = Math.round(distance*100/1000)/100
									$('.check_tip').text('您现在的距离为'+dis_now+'m(需要'+d+'m)')
									if( dis_now >= d-0.2 && dis_now <= parseInt(d)+parseFloat(0.2) ){
										socket.emit('SetMode', 1);
										socket.on('reply', function(reply) {
											$('#camera_img').attr('src', 'http://localhost:5002/video_feed')
											if (reply === "succes") {
												socket.emit('GetDirection', 1)
												socket.on('AcceptDirection', function(direction) {
													video_feed(direction, num1)
													if ($('#curr-progress').css('width') === '0px') {
														num1++
													}
													if (num1 === 4) {
														a()
														dis.disconnect()
														socket.disconnect()
													}
												})
											}
										})
									}
								})
							}
						})
				}else if(data[1] !== '手势识别' && data[data.length-1] === '摄像头识别'){
					$('.check_tip').show()
					$('.next').hide()
					$('#camera_img').show()
					$('#progress').hide()
					let dis = io('ws://localhost:5002')
					dis.emit('SetMode',2)
					dis.on('reply',function(reply){
						if (reply === "succes"){
								dis.emit('GetDistance',1)
								dis.on('AcceptDistance' ,function(distance){
									let dis_now = Math.round(distance*100/1000)/100
									$('.check_tip').text('您现在的距离为'+dis_now+'m(需要'+d+'m)')
									if( dis_now >= d-0.2 && dis_now <= parseInt(d)+parseFloat(0.2) ){
										a()
										dis.disconnect()
									}
								})
							}
						})
				}
			})
		</script>
		<script type="text/javascript">
			var V = [0.1, 0.12, 0.15, 0.2, 0.25, 0.3, 0.4, 0.5, 0.6, 0.8, 1.0, 1.2, 1.5, 2.0]
			var L = [4.0]
			var totalNum = [2, 2, 2, 3, 3, 4, 4, 5, 6, 7, 8, 8, 8, 8]
			let v = 0
			var total = totalNum[v]
			var num = 0
			var error = 0
			let count = 0
			var deg = 0
			


			for (let i = 1; i < 14; i++) {
				L[i] = L[i - 1] + 0.1
				L[i] = Math.round(L[i] * 100) / 100
			}

			function show() {
				let className = $('.meauser-right > ul > .click').eq(count).attr('class').split(' ')[0].replace('_', '-');
				$('.float > .' + className + '-result').text(V[v])
				$('.five > .' + className + '-result').text(L[v])
			}
			$('.next').click(function() {
				$(this).hide()
				a()
			})
			
			
			function a() {
				// E的边长 = π * 距离 / 视力  /  2160  0.727cm
				// P * pi * d/0.1/2160
				//转换成m
				
				const P = $('.card').width() / (85.60 / 1000)
				var d = $('.number').val()
				// console.log(svg.style.transform)
				function check() {
					total = totalNum[v]
					if (num > total / 2) {
						if (v >= V.length - 1) {
							show()
							if (count >= eyes.length - 1) {
								$('.another').hide()
								$('.wrap').show()
								$('.result').css('display', 'block')
								let result_window = $('.result')
								if (result_window.css('display') == 'block') {
									$('.wrap').css('filter', 'brightness(.5)')
									result_window.css('filter', 'brightness(1)')
								}
							} else {
								count++;
								$('.eye-type').text(eyes[count])
								v = 0
								$('.now-V').text(V[v])
								error = 0
								num = 0
								updateE(v, P, d)
							}
						}
						v++;
						if (V[v] == 1) {
							$('.now-V').text('1.0')
						} else {
							$('.now-V').text(V[v])
						}
						updateE(v, P, d);
						num = 0;
						error = 0;
						console.log(0)
					} else if (error > total / 2) {
						if (v <= 0) {
							v = 0
						} else {
							v--
						}
						show()
						if (count >= eyes.length - 1) {
							$('.another').hide()
							$('.wrap').show()
							$('.result').css('display', 'block')
							let result_window = $('.result')
							if (result_window.css('display') == 'block') {
								$('.wrap').css('filter', 'brightness(.5)')
								result_window.css('filter', 'brightness(1)')
							}
						} else {
							count++;
							$('.eye-type').text(eyes[count])
							$('.now-V').text(V[0])
							v = 0
							error = 0
							num = 0
							updateE(v, P, d)
						}
					} else {
						updateE(v, P, d)
					}
				}
				if (data[1] != '手势识别') {
					updateE(v, P, d)
					
					$('.square').show()
					$('#camera_img').hide()
					$('.eye-type').text(eyes[0])
					window.onkeydown = function(e) {
						var event = e || event
						if (event.keyCode == 37 && deg == 180) {
							num++;
							check()
						} else if (event.keyCode == 38 && deg == 270) {
							num++;
							check()
						} else if (event.keyCode == 39 && deg == 0) {
							num++;
							check()
						} else if (event.keyCode == 40 && deg == 90) {
							num++;
							check()
						} else {
							error++;
							check()
						}
					}
				} else {
					updateE(v, P, d)
					$('.square').show()
					$('#progress').show()
					$('#camera_img').show()
					$('#camera_img').css({
						'width': '200px',
						'height': '100px',
						'left': '60%',
						'top': '60%',
						'margin-top': 0,
						'margin-left': 0
					})
					$('.check_tip').hide()

					let socket1 = io('ws://localhost:5002')
					let N = 0
					let pStatus = ""
					function jdut(N){
						$('#curr-progress').css('animation','')
						if(N === 1){
							$('#curr-progress').css('width','125px')
						}else if(N === 2){
							$('#curr-progress').css('width','250px')
						}else if(N === 3){
							$('#curr-progress').css('width','375px')
						}else if(N === 4){
							$('#curr-progress').css('width','500px')
						}else{
							$('#curr-progress').css('width','0px')
						}
					}
					
					socket1.on('connect', function() {
						socket1.emit('SetMode', 1);
						socket1.on('reply', function(reply) {
							if (reply === "succes") {
								$('#camera_img').attr('src', 'http://localhost:5002/video_feed')
								socket1.emit('GetDirection', 1)
								socket1.on('AcceptDirection', function(direction) {
									setTimeout(function(){
									if(N === 0 && direction !== 'None'){
										pStatus = direction
										jdut(N)
									}
									if(direction === pStatus){
										console.log(pStatus)
										N++;
										jdut(N)
									}else{
										N=0;
										jdut(N)
									}},2)
									
									if ($('#curr-progress').css('width') === '500px') {
										if (direction === 'left' && deg == 180) {
											num++;
											check()
										} else if (direction === 'up' && deg == 270) {
											num++;
											check()
										} else if (direction === 'right' && deg == 0) {
											num++;
											check()
										} else if (direction === 'down' && deg == 90) {
											num++;
											check()
										} else {
											error++;
											check()
										}
									}
									
									if(N > 4){
										N = 0
										jdut(N)
									}
								})

							}
						})
					});
					

				}

			}

			function updateE(v, P, d) {
				let img_cm = P * Math.PI * d / V[v] / 2160
				deg = parseInt(Math.random() * 4) * 90
				$('svg').css({
					'width': img_cm,
					'height': img_cm,
					'margin-left': -img_cm / 2,
					'margin-top': -img_cm / 2,

				})
				$('svg').css('transform', 'rotate(' + deg + 'deg)')
			}
		</script>
		<!--收尾-->
		<script type="text/javascript">
			let lastBtn = $('.lastsure')
			lastBtn.click(function() {
				window.location.href = 'index.html'
			})
			let close = $('.close')
			close.click(function() {
				v = 0
				num = 0
				error = 0
				count = 0
				status = false
				$('.eye-type').text(eyes[count])
				$('.now-V').text(V[0])
				$('.wrap').show()
				$('body').css('background-color', '#cdcac5')
				$('.square').hide()
				$('#camera_img').hide()
				$('.another').hide()
				
				
			})
		</script>
	</body>
</html>
